<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 视口设置：自适应移动端，禁止用户缩放 -->
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<!-- 兼容性设置：确保使用最新渲染引擎 -->
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		/* 轮播图外层容器：固定尺寸并隐藏溢出内容 */
		.out-box{
			width: 200px;
			height: 200px;
			overflow: hidden;
			position:relative;
		}
		/* 轮播项容器：绝对定位实现横向排列 */
		.inner-box{
			position:absolute;
			left: 0;
			height:200px;
			display: flex;
			z-index: 10
		}
		/* 轮播动画效果：左右滑动过渡 */
		.inner-animation{
			transition: left 0.3s ease-in-out;
		}
		/* 单个轮播项样式 */
		.img-item{
			width: 200px;
			height:200px;
			display: inline-block;
			text-align: center;
			line-height: 200px;
			color: #000
		}
		/* 操作按钮容器：覆盖在轮播图上 */
		.operate-button{
			width:100%;
			height: 100%;
			position: absolute;
			left:0;
			z-index: 20;
			display: flex;
			justify-content: space-between;
			align-items: center;
			opacity: 0;
		}
		/* 单个按钮样式 */
		.operate-button .button{
			width: 30px;
			height: 30px;
			background: #00f;
			cursor: pointer;
		}
		/* 鼠标悬停时显示操作按钮 */
		.operate-button:hover{
			opacity:1
		}
	</style>
</head>
<body>
<!-- 轮播图容器：绑定鼠标事件 -->
<div class="out-box" onmouseover="mouseOver()" onmouseleave="mouseLeave()">
	<!-- 轮播项容器 -->
	<div class="inner-box" id="innerBox">
		<div class="img-item" style="background: #e3c341;">1</div>
		<div class="img-item" style="background: #1bde4d;">2</div>
		<div class="img-item" style="background: #0ea8d3;">3</div>
	</div>
	<!-- 左右操作按钮 -->
	<div class="operate-button">
		<div class="button" onclick="prevClick()"></div>
		<div class="button" onclick="nextClick()"></div>
	</div>
</div>
</body>
<script>
	let imgItemWidth = 0   // 单个轮播项的宽度
	let timer = null       // 自动轮播计时器
	let currentIndex = 1   // 当前轮播索引
	let innerBox = null    // 轮播容器DOM引用

	/**
	 * 初始化轮播图
	 * 功能：
	 * 1. 克隆首尾轮播项实现无缝滚动
	 * 2. 计算单个轮播项宽度
	 */
	function init(){
		innerBox = document.getElementById('innerBox')
		const firstChild = innerBox.children[0]
		const lastChild = innerBox.children[innerBox.children.length - 1]
		imgItemWidth = firstChild.offsetWidth

		// 克隆首尾节点并设置定位偏移
		const firstChildClone = firstChild.cloneNode(true)
		const lastChildClone = lastChild.cloneNode(true)
		lastChildClone.style.marginLeft = `-${imgItemWidth}px`
		firstChildClone.style.marginRight = `-${imgItemWidth}px`

		// 添加克隆节点到容器
		innerBox.insertBefore(lastChildClone,firstChild)
		innerBox.appendChild(firstChildClone)
	}

	/**
	 * 启动自动轮播
	 * 每2秒切换到下一张图片
	 */
	function start(){
		timer = setInterval(()=>{
			currentIndex++
			animation()
		},2000)
	}

	/**
	 * 执行轮播动画
	 * 功能：
	 * 1. 添加过渡效果移动轮播容器
	 * 2. 处理首尾边界情况实现无缝衔接
	 */
	function animation(){
		const len = innerBox.children.length
		if (currentIndex < len){
			// 添加过渡效果并移动容器
			innerBox.classList.add('inner-animation')
			innerBox.style.left = `${-(currentIndex - 1) * imgItemWidth}px`

			// 动画结束后清理过渡效果并重置边界位置
			setTimeout(()=>{
				innerBox.classList.remove('inner-animation')

				// 尾部边界处理：跳转到真实第一项
				if(currentIndex === len - 1){
					innerBox.style.left = '0px'
					currentIndex = 1
				}
				// 首部边界处理：跳转到真实最后一项
				if(currentIndex === 0){
					innerBox.style.left = `${-(len-3) * imgItemWidth}px`
					currentIndex = len - 2
				}
			},400)
		}
	}

	/**
	 * 鼠标移入时暂停轮播
	 */
	function mouseOver(){
		if(timer){
			clearInterval(timer)
			timer = null
		}
	}

	/**
	 * 鼠标移出时恢复轮播
	 */
	function mouseLeave(){
		start()
	}

	/**
	 * 上一张按钮点击处理
	 */
	function prevClick(){
		currentIndex--
		animation()
	}

	/**
	 * 下一张按钮点击处理
	 */
	function nextClick(){
		currentIndex++
		animation()
	}

	// 初始化并启动轮播
	init()
	start()
</script>
</html>
